<template>
  <div class="flex justify-between">
    <div class="flex gap1">
      <ElInput v-model="unit.keyword" size="small" placeholder="请输入关键字" @keyup.enter="search">
        <template #append>
          <span class="cursor-pointer" @click="search">搜索</span>
        </template>
      </ElInput>
      <ElButton v-if="unit.searchRef?.length > 0" :type="unit.searchRef?.visible ? 'primary' : undefined" @click="unit.searchRef.toggle()" size="small" class="ml0!">搜索栏</ElButton>
      <ElButton v-if="Object.keys(unit.statData).length > 0" :type="unit.statRef?.visible ? 'primary' : undefined" @click="unit.statRef?.toggle()" size="small" class="ml0!">统计栏</ElButton>
      <ElButton :type="unit.orderRef?.visible ? 'primary' : undefined" @click="unit.orderRef.toggle()" size="small" class="ml0!">排序栏</ElButton>
      <ElButton @click="unit?.refresh?.()" size="small" class="ml0!"><icon icon="ep:refresh" />刷新</ElButton>
    </div>
    <ActionBar :actions="actions" :unit="unit" :row="unit.currentRow" />
  </div>
</template>
<script lang="ts" setup>
  import { Action, Unit } from '@/seed-application/types'
  import { ActionBar } from '@/components/ActionBar';
  import { ElInput, ElButton } from 'element-plus';
  import { Icon } from '@/components/Icon'
  import { inject } from 'vue';
  import { unitKey } from '@/seed-application';
  
  const emits = defineEmits(['on-search'])
  const props = defineProps<{actions?: Record<string, Action>}>()
  const actions = props.actions || {}

  const unit = inject<Unit>(unitKey, void 0)
  console.log('unit', unit)

  const search = () => unit?.refresh?.()
</script>
